Passed
Pull Request — master (#10)
by Mark
03:00
created

script.js ➔ olovAddToMap   B

Complexity

Conditions 3

Size

Total Lines 143
Code Lines 46

Duplication

Lines 0
Ratio 0 %

Importance

Changes 0
Metric Value
cc 3
eloc 46
c 0
b 0
f 0
dl 0
loc 143
rs 8.7672

How to fix   Long Method   

Long Method

Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.

For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.

Commonly applied refactorings include:

1
/*
2
 * Copyright (c) 2008-2022 Mark C. Prins <[email protected]>
3
 *
4
 * Permission to use, copy, modify, and distribute this software for any
5
 * purpose with or without fee is hereby granted, provided that the above
6
 * copyright notice and this permission notice appear in all copies.
7
 *
8
 * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
9
 * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
10
 * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
11
 * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
12
 * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
13
 * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
14
 * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
15
 */
16
17
18
/**
19
 * Test for css support in the browser by sniffing for a css class we added
20
 * using javascript added by the action plugin; this is an edge case because
21
 * browsers that support javascript generally support css as well.
22
 *
23
 * @returns {Boolean} true when the browser supports css (and implicitly
24
 *          javascript)
25
 */
26
function olTestCSSsupport() {
27
    return (jQuery('.olCSSsupported').length > 0);
28
}
29
30
/**
31
 * Creates a DocumentFragment to insert into the dom.
32
 *
33
 * @param mapid
34
 *            id for the map div
35
 * @param width
36
 *            width for the map div
37
 * @param height
38
 *            height for the map div
39
 * @returns a {DocumentFragment} element that can be injected into the dom
40
 */
41
function olCreateMaptag(mapid, width, height) {
42
    var mEl = '<div id="' + mapid + '-olContainer" class="olContainer olWebOnly">'
43
            // map
44
            + '<div id="' + mapid + '" tabindex="0" style="width:' + width + ';height:' + height + ';" class="olMap"></div>'
45
            + '</div>',
46
        // fragment
47
        frag = document.createDocumentFragment(),
48
        // temp node
49
        temp = document.createElement('div');
50
    temp.innerHTML = mEl;
51
    while (temp.firstChild) {
52
        frag.appendChild(temp.firstChild);
53
    }
54
    return frag;
55
}
56
57
/**
58
 * Create the map based on the params given.
59
 *
60
 * @param {Object}
61
 *            mapOpts MapOptions hash {id:'olmap', width:500px, height:500px,
62
 *            lat:6710200, lon:506500, zoom:13, statusbar:1, controls:1,
63
 *            poihoverstyle:1, baselyr:'', kmlfile:'', gpxfile:'', geojsonfile,
64
 *            summary:''}
65
 * @param {Array}
66
 *            OLmapPOI array with POI's [ {lat:6710300,lon:506000,txt:'instap
67
 *            punt',angle:180,opacity:.9,img:'', rowId:n},... ]);
68
 *
69
 * @return {OpenLayers.Map} the created map
70
 */
71
function createMap(mapOpts, poi) {
72
73
    // const mapOpts = olMapData[0].mapOpts;
74
    // const poi = olMapData[0].poi;
75
76
    if (!olEnable) {
0 ignored issues
show
Best Practice introduced by
If you intend to check if the variable olEnable is declared in the current environment, consider using typeof olEnable === "undefined" instead. This is safe if the variable is not actually declared.
Loading history...
77
        return;
0 ignored issues
show
Comprehensibility Best Practice introduced by
Are you sure this return statement is not missing an argument? If this is intended, consider adding an explicit undefined like return undefined;.
Loading history...
78
    }
79
    if (!olTestCSSsupport()) {
80
        olEnable = false;
0 ignored issues
show
Bug introduced by
The variable olEnable seems to be never declared. Assigning variables without defining them first makes them global. If this was intended, consider making it explicit like using window.olEnable.
Loading history...
81
        return;
0 ignored issues
show
Comprehensibility Best Practice introduced by
Are you sure this return statement is not missing an argument? If this is intended, consider adding an explicit undefined like return undefined;.
Loading history...
82
    }
83
84
    // find map element location
85
    var cleartag = document.getElementById(mapOpts.id + '-clearer');
86
    if (cleartag === null) {
87
        return;
0 ignored issues
show
Comprehensibility Best Practice introduced by
Are you sure this return statement is not missing an argument? If this is intended, consider adding an explicit undefined like return undefined;.
Loading history...
88
    }
89
    // create map element and add to document
90
    var fragment = olCreateMaptag(mapOpts.id, mapOpts.width, mapOpts.height);
91
    cleartag.parentNode.insertBefore(fragment, cleartag);
92
93
    /** dynamic map extent. */
94
    let extent = ol.extent.createEmpty();
0 ignored issues
show
Bug introduced by
The variable ol seems to be never declared. If this is a global, consider adding a /** global: ol */ comment.

This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.

To learn more about declaring variables in Javascript, see the MDN.

Loading history...
95
    overlayGroup = new ol.layer.Group({title: 'Overlays', fold: 'open', layers: []});
0 ignored issues
show
Bug introduced by
The variable overlayGroup seems to be never declared. Assigning variables without defining them first makes them global. If this was intended, consider making it explicit like using window.overlayGroup.
Loading history...
96
    const baseLyrGroup = new ol.layer.Group({'title': 'Base maps', layers: []});
97
98
    const map = new ol.Map({
99
        target: document.getElementById(mapOpts.id),
100
        layers: [baseLyrGroup, overlayGroup],
101
        view:   new ol.View({
102
            center:     ol.proj.transform([mapOpts.lon, mapOpts.lat], 'EPSG:4326', 'EPSG:3857'),
103
            zoom:       mapOpts.zoom,
104
            projection: 'EPSG:3857'
105
        })
106
    });
107
108
    if (osmEnable) {
0 ignored issues
show
Best Practice introduced by
If you intend to check if the variable osmEnable is declared in the current environment, consider using typeof osmEnable === "undefined" instead. This is safe if the variable is not actually declared.
Loading history...
109
        baseLyrGroup.getLayers().push(
110
            new ol.layer.Tile({
111
                visible: true,
112
                title:   'OSM',
113
                type:    'base',
114
                source:  new ol.source.OSM()
115
            }));
116
117
        baseLyrGroup.getLayers().push(
118
            new ol.layer.Tile({
119
                visible: mapOpts.baselyr === "cycle map",
120
                title:   'cycle map',
121
                type:    'base',
122
                source:  new ol.source.OSM({
123
                    url:          'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=' + tfApiKey,
0 ignored issues
show
Bug introduced by
The variable tfApiKey seems to be never declared. If this is a global, consider adding a /** global: tfApiKey */ comment.

This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.

To learn more about declaring variables in Javascript, see the MDN.

Loading history...
124
                    attributions: 'Data &copy;ODbL <a href="https://openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>, '
125
                                      + 'Tiles &copy;<a href="https://www.thunderforest.com/" target="_blank">Thunderforest</a>'
126
                                      + '<img src="https://www.thunderforest.com/favicon.ico" alt="Thunderforest logo"/>'
127
                })
128
            }));
129
130
        baseLyrGroup.getLayers().push(
131
            new ol.layer.Tile({
132
                visible: mapOpts.baselyr === "transport",
133
                title:   'transport',
134
                type:    'base',
135
                source:  new ol.source.OSM({
136
                    url:          'https://{a-c}.tile.thunderforest.com/transport/{z}/{x}/{y}.png?apikey=' + tfApiKey,
137
                    attributions: 'Data &copy;ODbL <a href="https://openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>, '
138
                                      + 'Tiles &copy;<a href="https://www.thunderforest.com/" target="_blank">Thunderforest</a>'
139
                                      + '<img src="https://www.thunderforest.com/favicon.ico" alt="Thunderforest logo"/>'
140
                })
141
            }));
142
143
        baseLyrGroup.getLayers().push(
144
            new ol.layer.Tile({
145
                visible: mapOpts.baselyr === "landscape",
146
                title:   'landscape',
147
                type:    'base',
148
                source:  new ol.source.OSM({
149
                    url:          'https://{a-c}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png?apikey=' + tfApiKey,
150
                    attributions: 'Data &copy;ODbL <a href="https://openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>, '
151
                                      + 'Tiles &copy;<a href="https://www.thunderforest.com/" target="_blank">Thunderforest</a>'
152
                                      + '<img src="https://www.thunderforest.com/favicon.ico" alt="Thunderforest logo"/>'
153
                })
154
            }));
155
156
        baseLyrGroup.getLayers().push(
157
            new ol.layer.Tile({
158
                visible: mapOpts.baselyr === "outdoors",
159
                title:   'outdoors',
160
                type:    'base',
161
                source:  new ol.source.OSM({
162
                    url:          'https://{a-c}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey=' + tfApiKey,
163
                    attributions: 'Data &copy;ODbL <a href="https://openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>, '
164
                                      + 'Tiles &copy;<a href="https://www.thunderforest.com/" target="_blank">Thunderforest</a>'
165
                                      + '<img src="https://www.thunderforest.com/favicon.ico" alt="Thunderforest logo"/>'
166
                })
167
            }));
168
    }
169
170
    if (bEnable && bApiKey !== '') {
0 ignored issues
show
Best Practice introduced by
If you intend to check if the variable bEnable is declared in the current environment, consider using typeof bEnable === "undefined" instead. This is safe if the variable is not actually declared.
Loading history...
Bug introduced by
The variable bApiKey seems to be never declared. If this is a global, consider adding a /** global: bApiKey */ comment.

This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.

To learn more about declaring variables in Javascript, see the MDN.

Loading history...
171
        baseLyrGroup.getLayers().push(
172
            new ol.layer.Tile({
173
                visible: mapOpts.baselyr === "bing road",
174
                title:   'bing road',
175
                type:    'base',
176
                source:  new ol.source.BingMaps({
177
                    key:        bApiKey,
178
                    imagerySet: 'Road'
179
                })
180
            }));
181
182
        baseLyrGroup.getLayers().push(
183
            new ol.layer.Tile({
184
                visible: mapOpts.baselyr === "bing sat",
185
                title:   'bing sat',
186
                type:    'base',
187
                source:  new ol.source.BingMaps({
188
                    key:        bApiKey,
189
                    imagerySet: 'Aerial'
190
                })
191
            }));
192
193
        baseLyrGroup.getLayers().push(
194
            new ol.layer.Tile({
195
                visible: mapOpts.baselyr === "bing hybrid",
196
                title:   'bing hybrid',
197
                type:    'base',
198
                source:  new ol.source.BingMaps({
199
                    key:        bApiKey,
200
                    imagerySet: 'AerialWithLabels'
201
                })
202
            }));
203
    }
204
205
    if (stamenEnable) {
0 ignored issues
show
Best Practice introduced by
If you intend to check if the variable stamenEnable is declared in the current environment, consider using typeof stamenEnable === "undefined" instead. This is safe if the variable is not actually declared.
Loading history...
206
        baseLyrGroup.getLayers().push(
207
            new ol.layer.Tile({
208
                visible: false,
209
                type:    'base',
210
                title:   'toner',
211
                source:  new ol.source.Stamen({layer: 'toner'})
212
            })
213
        );
214
        baseLyrGroup.getLayers().push(
215
            new ol.layer.Tile({
216
                visible: false,
217
                type:    'base',
218
                title:   'terrain',
219
                source:  new ol.source.Stamen({layer: 'terrain'})
220
            })
221
        );
222
    }
223
224
    map.addControl(new ol.control.ScaleLine({bar: true, text: true}));
225
    map.addControl(new ol.control.MousePosition({
226
        coordinateFormat: ol.coordinate.createStringXY(4), projection: 'EPSG:4326',
227
    }));
228
    map.addControl(new ol.control.FullScreen());
229
    map.addControl(new ol.control.OverviewMap());
230
    map.addControl(new ol.control.LayerSwitcher());
231
    extent = ol.extent.extend(extent, map.getView().calculateExtent());
232
233
    const iconScale = 1.0;
234
    const vectorSource = new ol.source.Vector();
235
    poi.forEach((p) => {
236
        const f = new ol.Feature({
0 ignored issues
show
Bug introduced by
The variable ol seems to be never declared. If this is a global, consider adding a /** global: ol */ comment.

This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.

To learn more about declaring variables in Javascript, see the MDN.

Loading history...
237
            geometry:    new ol.geom.Point(ol.proj.fromLonLat([p.lon, p.lat])),
238
            description: p.txt,
239
            img:         p.img,
240
            rowId:       p.rowId,
241
            lat:         p.lat,
242
            lon:         p.lon,
243
            angle:       p.angle,
244
            alt:         p.img.substring(0, p.img.lastIndexOf("."))
245
        });
246
        f.setId(p.rowId);
247
        f.setStyle(new ol.style.Style({
248
            text:      new ol.style.Text({
249
                text:           "" + p.rowId,
250
                textAlign:      'left',
251
                textBaseline:   'bottom',
252
                offsetX:        8,
253
                offsetY:        -8,
254
                scale:          iconScale,
255
                fill:           new ol.style.Fill({color: 'rgb(0,0,0)'}),
256
                font:           '12px monospace bold',
257
                backgroundFill: new ol.style.Fill({color: 'rgba(255,255,255,.4)'})
258
            }), image: new ol.style.Icon({
259
                src:         DOKU_BASE + "lib/plugins/openlayersmap/icons/" + p.img,
0 ignored issues
show
Bug introduced by
The variable DOKU_BASE seems to be never declared. If this is a global, consider adding a /** global: DOKU_BASE */ comment.

This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.

To learn more about declaring variables in Javascript, see the MDN.

Loading history...
260
                crossOrigin: '',
261
                opacity:     p.opacity,
262
                scale:       iconScale,
263
                rotation:    p.angle * Math.PI / 180,
264
            }),
265
        }));
266
        vectorSource.addFeature(f);
267
    });
268
269
    const vectorLayer = new ol.layer.Vector({title: 'POI', visible: true, source: vectorSource});
270
    overlayGroup.getLayers().push(vectorLayer);
271
    if (mapOpts.autozoom) {
272
        extent = ol.extent.extend(extent, vectorSource.getExtent());
273
        map.getView().fit(extent);
274
    }
275
276
    if (mapOpts.kmlfile.length > 0) {
277
        try {
278
            const kmlSource = new ol.source.Vector({
279
                url:    DOKU_BASE + "lib/exe/fetch.php?media=" + mapOpts.kmlfile,
0 ignored issues
show
Bug introduced by
The variable DOKU_BASE seems to be never declared. If this is a global, consider adding a /** global: DOKU_BASE */ comment.

This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.

To learn more about declaring variables in Javascript, see the MDN.

Loading history...
280
                format: new ol.format.KML(),
281
            });
282
            overlayGroup.getLayers().push(new ol.layer.Vector({title: 'KML file', visible: true, source: kmlSource}));
283
284
            if (mapOpts.autozoom) {
285
                kmlSource.once('change', function () {
286
                    extent = ol.extent.extend(extent, kmlSource.getExtent());
0 ignored issues
show
Bug introduced by
The variable ol seems to be never declared. If this is a global, consider adding a /** global: ol */ comment.

This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.

To learn more about declaring variables in Javascript, see the MDN.

Loading history...
287
                    map.getView().fit(extent);
288
                });
289
            }
290
        } catch (e) {
291
            console.error(e);
292
        }
293
    }
294
295
    if (mapOpts.geojsonfile.length > 0) {
296
        try {
297
            const geoJsonSource = new ol.source.Vector({
298
                url:    DOKU_BASE + "lib/exe/fetch.php?media=" + mapOpts.geojsonfile,
299
                format: new ol.format.GeoJSON(),
300
            });
301
            overlayGroup.getLayers().push(new ol.layer.Vector({
302
                title: 'GeoJSON file', visible: true, source: geoJsonSource,
303
                // TODO
304
                // style:  {
305
                //     strokeColor:   "#FF00FF",
306
                //     strokeWidth:   3,
307
                //     strokeOpacity: 0.7,
308
                //     pointRadius:   4,
309
                //     fillColor:     "#FF99FF",
310
                //     fillOpacity:   0.7
311
                // }
312
            }));
313
314
            if (mapOpts.autozoom) {
315
                geoJsonSource.once('change', function () {
316
                    extent = ol.extent.extend(extent, geoJsonSource.getExtent());
0 ignored issues
show
Bug introduced by
The variable ol seems to be never declared. If this is a global, consider adding a /** global: ol */ comment.

This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.

To learn more about declaring variables in Javascript, see the MDN.

Loading history...
317
                    map.getView().fit(extent);
318
                });
319
            }
320
        } catch (e) {
321
            console.error(e);
322
        }
323
    }
324
325
    if (mapOpts.gpxfile.length > 0) {
326
        try {
327
            const gpxSource = new ol.source.Vector({
328
                url:    DOKU_BASE + "lib/exe/fetch.php?media=" + mapOpts.gpxfile,
329
                format: new ol.format.GPX(),
330
            });
331
            overlayGroup.getLayers().push(new ol.layer.Vector({
332
                title: 'GPS track', visible: true, source: gpxSource,
333
                // TODO
334
                // style:  {
335
                //     strokeColor:   "#0000FF",
336
                //     strokeWidth:   3,
337
                //     strokeOpacity: 0.7,
338
                //     pointRadius:   4,
339
                //     fillColor:     "#0099FF",
340
                //     fillOpacity:   0.7
341
                // }
342
            }));
343
344
            if (mapOpts.autozoom) {
345
                gpxSource.once('change', function () {
346
                    extent = ol.extent.extend(extent, gpxSource.getExtent());
0 ignored issues
show
Bug introduced by
The variable ol seems to be never declared. If this is a global, consider adding a /** global: ol */ comment.

This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.

To learn more about declaring variables in Javascript, see the MDN.

Loading history...
347
                    map.getView().fit(extent);
348
                });
349
            }
350
        } catch (e) {
351
            console.error(e);
352
        }
353
    }
354
355
    const container = document.getElementById('popup');
356
    const content = document.getElementById('popup-content');
357
    const closer = document.getElementById('popup-closer');
358
359
    const overlay = new ol.Overlay({
360
        element: container, autoPan: true, autoPanAnimation: {
361
            duration: 250,
362
        }, //stopEvent: false,
363
    });
364
    map.addOverlay(overlay);
365
366
    /**
367
     * Add a click handler to hide the popup.
368
     * @return {boolean} Don't follow the href.
369
     */
370
    closer.onclick = function () {
371
        overlay.setPosition(undefined);
372
        closer.blur();
373
        return false;
374
    };
375
376
    // display popup on click
377
    map.on('singleclick', function (evt) {
378
        const selFeature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
379
            return feature;
380
        });
381
        if (selFeature) {
382
            overlay.setPosition(evt.coordinate);
383
384
            let pContent = '<div class="spacer">&nbsp;</div>';
385
            let locDesc = '';
386
387
            if (selFeature.get('rowId') !== undefined) {
388
                pContent += '<span class="rowId">' + selFeature.get('rowId') + ': </span>';
389
            }
390
            if (selFeature.get('name') !== undefined) {
391
                pContent += '<span class="txt">' + selFeature.get('name') + '</span>';
392
                locDesc = selFeature.get('name');
0 ignored issues
show
Unused Code introduced by
The variable locDesc seems to be never used. Consider removing it.
Loading history...
393
                // TODO strip <p> tag from locDesc
394
                // locDesc = selFeature.get('name').split(/\s+/).slice(0,2).join('+');
395
            }
396
            if (selFeature.get('ele') !== undefined) {
397
                pContent += '<div class="ele">elevation: ' + selFeature.get('ele') + '</div>';
398
            }
399
            if (selFeature.get('type') !== undefined) {
400
                pContent += '<div>' + selFeature.get('type') + '</div>';
401
            }
402
            if (selFeature.get('time') !== undefined) {
403
                pContent += '<div class="time">time: ' + selFeature.get('time') + '</div>';
404
            }
405
            if (selFeature.get('description') !== undefined) {
406
                pContent += '<div class="desc">' + selFeature.get('description') + '</div>';
407
            }
408
            if (selFeature.get('img') !== undefined) {
409
                pContent += '<div class="coord" title="lat;lon">' +
410
                    '<img alt="" src="' + DOKU_BASE + 'lib/plugins/openlayersmap/icons/' + selFeature.get('img') +
0 ignored issues
show
Bug introduced by
The variable DOKU_BASE seems to be never declared. If this is a global, consider adding a /** global: DOKU_BASE */ comment.

This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.

To learn more about declaring variables in Javascript, see the MDN.

Loading history...
411
                    '" width="16" height="16" ' + 'style="transform:rotate(' + selFeature.get('angle') + 'deg)" />&nbsp;' +
412
                    '<a href="geo:' + selFeature.get('lat') + ',' + selFeature.get('lon') + '?q=' + selFeature.get('lat') +
413
                    ',' + selFeature.get('lon') + '(' + selFeature.get('alt') + ')" title="Open in navigation app">' +
414
                    ol.coordinate.format([selFeature.get('lon'), selFeature.get('lat')], '{x}º; {y}º', 4) + '</a></div>';
0 ignored issues
show
Bug introduced by
The variable ol seems to be never declared. If this is a global, consider adding a /** global: ol */ comment.

This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.

To learn more about declaring variables in Javascript, see the MDN.

Loading history...
415
            }
416
            content.innerHTML = pContent;
417
        } else {
0 ignored issues
show
Comprehensibility Documentation Best Practice introduced by
This code block is empty. Consider removing it or adding a comment to explain.
Loading history...
418
            // do nothing...
419
        }
420
    });
421
422
    // change mouse cursor when over marker
423
    map.on('pointermove', function (e) {
424
        const pixel = map.getEventPixel(e.originalEvent);
425
        const hit = map.hasFeatureAtPixel(pixel);
426
        map.getTarget().style.cursor = hit ? 'pointer' : '';
427
    });
428
429
    return map;
430
}
431
432
/**
433
 * add layers to the map based on the olMapOverlays object.
434
 */
435
function olovAddToMap() {
436
        for (const key in olMapOverlays) {
0 ignored issues
show
Bug introduced by
The variable olMapOverlays seems to be never declared. If this is a global, consider adding a /** global: olMapOverlays */ comment.

This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.

To learn more about declaring variables in Javascript, see the MDN.

Loading history...
437
            const overlay = olMapOverlays[key];
438
            const m = olMaps[overlay.id];
0 ignored issues
show
Bug introduced by
The variable olMaps seems to be never declared. If this is a global, consider adding a /** global: olMaps */ comment.

This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.

To learn more about declaring variables in Javascript, see the MDN.

Loading history...
439
440
            switch (overlay.type) {
441
                case 'osm':
442
                    m.addLayer(new ol.layer.Tile({
0 ignored issues
show
Bug introduced by
The variable ol seems to be never declared. If this is a global, consider adding a /** global: ol */ comment.

This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.

To learn more about declaring variables in Javascript, see the MDN.

Loading history...
443
                        title:   overlay.name,
444
                        visible: (overlay.visible).toLowerCase() === 'true',
445
                        opacity: parseFloat(overlay.opacity),
446
                        source:  new ol.source.OSM({
447
                            url:          overlay.url,
448
                            crossOrigin:  'Anonymous',
449
                            attributions: overlay.attribution
450
                        })
451
                    }));
452
                    break;
453
                case 'wms':
454
                    m.addLayer(new ol.layer.Image({
455
                        title:   overlay.name,
456
                        opacity: parseFloat(overlay.opacity),
457
                        visible: (overlay.visible).toLowerCase() === 'true',
458
                        source:  new ol.source.ImageWMS({
459
                            url:          overlay.url,
460
                            params:       {
461
                                'LAYERS':      overlay.layers,
462
                                'VERSION':     overlay.version,
463
                                'TRANSPARENT': overlay.transparent,
464
                                'FORMAT':      overlay.format
465
                            },
466
                            ratio:        1,
467
                            crossOrigin:  'Anonymous',
468
                            attributions: overlay.attribution
469
                        })
470
                    }));
471
                    break;
472
                case 'ags':
473
                    m.addLayer(new ol.layer.Image({
474
                        title:   overlay.name,
475
                        opacity: parseFloat(overlay.opacity),
476
                        visible: (overlay.visible).toLowerCase() === 'true',
477
                        source:  new ol.source.ImageArcGISRest({
478
                            url:          overlay.url,
479
                            params:       {
480
                                'LAYERS':      overlay.layers,
481
                                'TRANSPARENT': overlay.transparent,
482
                                'FORMAT':      overlay.format
483
                            },
484
                            ratio:        1,
485
                            crossOrigin:  'Anonymous',
486
                            attributions: overlay.attribution
487
                        })
488
                    }));
489
                    break;
490
                // case 'mapillary':
491
                //     var mUrl = 'http://api.mapillary.com/v1/im/search?';
492
                //     if (overlay.skey !== '') {
493
                //         mUrl = 'http://api.mapillary.com/v1/im/sequence?';
494
                //     }
495
                //     var mLyr = new OpenLayers.Layer.Vector(
496
                //         "Mapillary", {
497
                //             projection:  new OpenLayers.Projection("EPSG:4326"),
498
                //             strategies:  [new OpenLayers.Strategy.BBOX({
499
                //                 ratio:     1.1,
500
                //                 resFactor: 1.5
501
                //             }) /* ,new OpenLayers.Strategy.Cluster({}) */],
502
                //             protocol:    new OpenLayers.Protocol.HTTP({
503
                //                 url:            mUrl,
504
                //                 format:         new OpenLayers.Format.GeoJSON(),
505
                //                 params:         {
506
                //                     // default to max. 250 locations
507
                //                     'max-results': 250,
508
                //                     'geojson':     true,
509
                //                     'skey':        overlay.skey
510
                //                 },
511
                //                 filterToParams: function (filter, params) {
512
                //                     if (filter.type === OpenLayers.Filter.Spatial.BBOX) {
513
                //                         // override the bbox serialization of
514
                //                         // the filter to give the Mapillary
515
                //                         // specific bounds
516
                //                         params['min-lat'] = filter.value.bottom;
517
                //                         params['max-lat'] = filter.value.top;
518
                //                         params['min-lon'] = filter.value.left;
519
                //                         params['max-lon'] = filter.value.right;
520
                //                         // if the width of our bbox width is
521
                //                         // less than 0.15 degrees drop the max
522
                //                         // results
523
                //                         if (filter.value.top - filter.value.bottom < .15) {
524
                //                             OpenLayers.Console.debug('dropping max-results parameter, width is: ',
525
                //                                 filter.value.top - filter.value.bottom);
526
                //                             params['max-results'] = null;
527
                //                         }
528
                //                     }
529
                //                     return params;
530
                //                 }
531
                //             }),
532
                //             styleMap:    new OpenLayers.StyleMap({
533
                //                 'default': {
534
                //                     cursor:          'help',
535
                //                     rotation:        '${ca}',
536
                //                     externalGraphic: DOKU_BASE + 'lib/plugins/openlayersmapoverlays/icons/arrow-up-20.png',
537
                //                     graphicHeight:   20,
538
                //                     graphicWidth:    20,
539
                //                 },
540
                //                 'select':  {
541
                //                     externalGraphic: DOKU_BASE + 'lib/plugins/openlayersmapoverlays/icons/arrow-up-20-select.png',
542
                //                     label:           '${location}',
543
                //                     fontSize:        '1em',
544
                //                     fontFamily:      'monospace',
545
                //                     labelXOffset:    '0.5',
546
                //                     labelYOffset:    '0.5',
547
                //                     labelAlign:      'lb',
548
                //                 }
549
                //             }),
550
                //             attribution: '<a href="http://www.mapillary.com/legal.html">' +
551
                //                              '<img src="http://mapillary.com/favicon.ico" ' +
552
                //                              'alt="Mapillary" height="16" width="16" />Mapillary (CC-BY-SA)',
553
                //             visibility:  (overlay.visible).toLowerCase() == 'true',
554
                //         });
555
                //     m.addLayer(mLyr);
556
                //     selectControl.addLayer(mLyr);
557
                //     break;
558
                // case 'search':
559
                //     m.addLayer(new OpenLayers.Layer.Vector(
560
                //         overlay.name,
561
                //         overlay.url,
562
                //         {
563
                //             layers:      overlay.layers,
564
                //             version:     overlay.version,
565
                //             transparent: overlay.transparent,
566
                //             format:      overlay.format
567
                //         }, {
568
                //             opacity:     parseFloat(overlay.opacity),
569
                //             visibility:  (overlay.visible).toLowerCase() == 'true',
570
                //             isBaseLayer: !1,
571
                //             attribution: overlay.attribution
572
                //         }
573
                //     ));
574
                //     break;
575
            }
576
        }
577
}
578
579
/** init. */
580
function olInit() {
581
    if (olEnable) {
0 ignored issues
show
Best Practice introduced by
If you intend to check if the variable olEnable is declared in the current environment, consider using typeof olEnable === "undefined" instead. This is safe if the variable is not actually declared.
Loading history...
582
        // add info window to DOM
583
        const frag = document.createDocumentFragment(),
584
            temp = document.createElement('div');
585
        temp.innerHTML = '<div id="popup" class="olPopup"><a href="#" id="popup-closer" class="olPopupCloseBox"></a><div id="popup-content"></div></div>';
586
        while (temp.firstChild) {
587
            frag.appendChild(temp.firstChild);
588
        }
589
        document.body.appendChild(frag);
590
591
        let _i = 0;
592
        // create the maps in the page
593
        for (_i = 0; _i < olMapData.length; _i++) {
0 ignored issues
show
Bug introduced by
The variable olMapData seems to be never declared. If this is a global, consider adding a /** global: olMapData */ comment.

This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.

To learn more about declaring variables in Javascript, see the MDN.

Loading history...
594
            var _id = olMapData[_i].mapOpts.id;
595
            olMaps[_id] = createMap(olMapData[_i].mapOpts, olMapData[_i].poi);
0 ignored issues
show
Bug introduced by
The variable olMaps seems to be never declared. If this is a global, consider adding a /** global: olMaps */ comment.

This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.

To learn more about declaring variables in Javascript, see the MDN.

Loading history...
596
597
            // set max-width on help pop-over
598
            jQuery('#' + _id).parent().parent().find('.olMapHelp').css('max-width', olMapData[_i].mapOpts.width);
599
600
            // shrink the map width to fit inside page container
601
            var _w = jQuery('#' + _id + '-olContainer').parent().innerWidth();
602
            if (parseInt(olMapData[_i].mapOpts.width) > _w) {
603
                jQuery('#' + _id).width(_w);
604
                jQuery('#' + _id + '-olStatusBar').width(_w);
605
                jQuery('#' + _id).parent().parent().find('.olMapHelp').width(_w);
606
                olMaps[_id].updateSize();
607
            }
608
        }
609
610
        // add overlays
611
        olovAddToMap();
612
613
        let resizeTimer;
614
        jQuery(window).on('resize', function (e) {
0 ignored issues
show
Unused Code introduced by
The parameter e is not used and could be removed.

This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function.

Loading history...
615
            clearTimeout(resizeTimer);
616
            resizeTimer = setTimeout(function () {
617
                for (_i = 0; _i < olMapData.length; _i++) {
0 ignored issues
show
Bug introduced by
The variable _i is changed as part of the for loop for example by _i++ on line 617. Only the value of the last iteration will be visible in this function if it is called after the loop.
Loading history...
Bug introduced by
The variable olMapData seems to be never declared. If this is a global, consider adding a /** global: olMapData */ comment.

This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.

To learn more about declaring variables in Javascript, see the MDN.

Loading history...
618
                    var _id = olMapData[_i].mapOpts.id;
619
                    var _w = jQuery('#' + _id + '-olContainer').parent().innerWidth();
620
                    if (parseInt(olMapData[_i].mapOpts.width) > _w) {
621
                        jQuery('#' + _id).width(_w);
622
                        jQuery('#' + _id + '-olStatusBar').width(_w);
623
                        jQuery('#' + _id).parent().parent().find('.olMapHelp').width(_w);
624
                        olMaps[_id].updateSize();
0 ignored issues
show
Bug introduced by
The variable olMaps seems to be never declared. If this is a global, consider adding a /** global: olMaps */ comment.

This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.

To learn more about declaring variables in Javascript, see the MDN.

Loading history...
625
                    }
626
                }
627
            }, 250);
628
        });
629
630
        // hide the table(s) with POI by giving it a print-only style
631
        jQuery('.olPOItableSpan').addClass('olPrintOnly');
632
        // hide the static map image(s) by giving it a print only style
633
        jQuery('.olStaticMap').addClass('olPrintOnly');
634
        // add help button with toggle.
635
        jQuery('.olWebOnly > .olMap')
636
            .prepend(
637
                '<div class="olMapHelpButtonDiv">'
638
                + '<button onclick="jQuery(\'.olMapHelp\').toggle(500);" class="olMapHelpButton olHasTooltip"><span>'
639
                + 'Show or hide help</span>?</button></div>');
640
        // toggle to switch dynamic vs. static map
641
        jQuery('.olMapHelp').before(
642
            '<div class="a11y"><button onclick="jQuery(\'.olPrintOnly\').toggle();jQuery(\'.olWebOnly\').toggle();">'
643
            + 'Hide or show the dynamic map</button></div>');
644
    }
645
}
646
647
/**
648
 * CSS support flag.
649
 *
650
 * @type {Boolean}
651
 */
652
let olCSSEnable = true;
0 ignored issues
show
Unused Code introduced by
The variable olCSSEnable seems to be never used. Consider removing it.
Loading history...
653
654
/* register olInit to run with onload event. */
655
jQuery(olInit);
656